<template>
  <div class="public_content over-h">
		<!-- 个人中心 -->
		<!--左侧导航区开始-->
		<div class="public_content_left news_slide">
			<ul class="public_nav_vertical">
				<li>
					<div class="public_nav_vertical_title">
						<span>个人中心</span>
					</div>
					<dl class="public_nav_vertical_child">
		                <dd v-for="(item,index) in navList" @click="addClassHandle(index)" :class="{ 'active':index==current}">
							<div v-if="item.name == '退出登录'" key="layout" @click="layout()">
								<span class="fcolor-99 p-0-20">{{item.name}}</span>
							</div>
							<div v-else key="other" @click="clickHandle(index,item.name)">
								<span class="fcolor-99 p-0-20">{{item.name}}</span>
							</div>
		                </dd>                    						       
					</dl>
				</li>
			</ul>    			
		</div>
		<!--左侧导航区结束-->
		<!--右侧内容-->
		<div class="public_content_right">
			<div class="public_card">
				<div class="public_card_title">
					<span class="line"></span>
					<span class="fsize-20 pl-5">{{title}}</span>
				</div>
				<div class="public_card_content mt-15">
					<!-- 党员信息 -->
					<party-member-info v-if="navIndex === 0" ref="partyMemberInfo"></party-member-info>
					<!-- 书记信箱 -->
					<secretary-mailbox v-if="navIndex === 1" ref="secretaryMailbox"></secretary-mailbox>
					<!-- 我的积分 -->
					<my-score v-if="navIndex === 3" ref="myScore"></my-score>
				</div>
			</div>
		</div>
				
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	import PartyMemberInfo from './party-member-info'
	import SecretaryMailbox from './secretary-mailbox'
	import MyScore from './my-score'
	export default {
		data() {
			return {
				userName:'',
				detailData:{},
				navList:[
					{name:'党员信息'},
					{name:'书记信箱'},
					{name:'通讯录'},
					{name:'我的积分'},
					{name:'我的收藏'},
					{name:'学习记录'},
					{name:'消息通知'},
					{name:'我要反馈'},
					{name:'退出登录'},
				],
				title:'党员信息',
				navIndex:0,
				current:null   //当前高亮的左侧导航下标
			}
		},
		mounted() {
			this.init();
		},
		components: {
		  PartyMemberInfo,SecretaryMailbox,MyScore
		},
		methods: {
			init(){
				this.current = 0;
				this.userName = sessionStorage.getItem('userName');
			},
			clickHandle(i,name){
				this.navIndex = i;
				this.title = name;
			},
			layout(){
				sessionStorage.removeItem('userName');
				this.$router.push({ path:'/login'})
			},
			addClassHandle(index){
				this.current = index
			}
		}	
	}
</script>

<style scoped>
	/* 左侧导航 */
		.public_content_left{
			width: 200px;
			float: left;
			background: #fff;
		}
		.public_nav_vertical{
	    box-shadow: 0 0 12px 0 rgba(4, 0, 0, 0.12);
	    border: solid 1px rgba(245, 245, 245, 1);
	}
	.public_nav_vertical li .public_nav_vertical_title{
	    height: 50px;
	    line-height: 50px;
	    background: url("../../assets/img/personTitle.jpg") no-repeat;
		background-size: cover;
		font-size: 16px;
		color: #fff;
		text-align: center;
	}
	.public_nav_vertical dd{
	    height: 42px;
	    line-height: 42px;
		padding: 0 20px;
		border-bottom: solid 1px #f5f5f5;
	    font-size: 14px;
		color: #999;
	}
	.public_nav_vertical_child dd.active{
	    background-color: #E0E0E0;
	}
	.public_nav_vertical .public_nav_vertical_child dd.active .fcolor-99{
		color: #C93135;
	}
	/* 右侧内容 */
	.public_content_right{
		width: 960px;
		min-height: 440px;
		box-sizing: border-box;
		padding: 15px;
		float: right;
		background: #fff;
	}
	.public_card_title{
		border-bottom:none;
	}
	.public_card_title .line{
		width:2px;
		height: 16px;
		background-color: #C50C12;
	}
</style>